<template>
  <div class="post_list">
    <!-- 贴文列表 -->
    <div class="post_list_item">
      <div class="item_header">
        <!-- 头像 -->
        <router-link :to="'/PersonView/' + user_id">
          <div>
            <img :src="headerImg" alt="" />
          </div>
        </router-link>
        <!-- 隐藏/显示用户信息弹窗 -->
        <div class="popcard">
          <div class="popcard_panel">
            <!-- 头部背景 -->
            <div class="popcard_header">
              <img :src="headerBgImg" alt="" class="ex-picture-img" />
              <!-- 定位头像和信息 -->
              <div class="pop_h">
                <router-link :to="'/PersonView/' + user_id">
                  <img :src="headerImg" alt="" class="pop_h_img"
                /></router-link>
              </div>
              <div class="pop_name">{{ nickname }}</div>
              <div class="pop_auth">
                {{ $t("postlist.auth_msg")
                }}<span v-if="auth_id == 1">{{
                  $t("postlist.auth_personal")
                }}</span
                ><span v-if="auth_id == 2">{{
                  $t("postlist.auth_orgnaztion")
                }}</span>
              </div>
              <div class="u_fo">
                <!-- 读取判断关注状态 -->
                <div v-if="is_fo == 1">
                  <!-- 当前用户关注了发帖人 -->
                  <el-button size="mini" @click="cancelfoUser" round>{{
                    foButtonText
                  }}</el-button>
                </div>
                <div v-else-if="is_fo == 2">
                  <!-- 互相关注 -->
                  <el-button size="mini" @click="cancelfoUser" round>{{
                    foButtonText
                  }}</el-button>
                </div>
                <div v-else-if="is_fo == 3">
                  <!-- 当前发帖人关注了当前用户 -->
                  <el-button size="mini" @click="foUser" round>{{
                    foButtonText
                  }}</el-button>
                </div>
                <div v-else>
                  <!-- 双方都没有相互关注 -->
                  <el-button size="mini" @click="foUser" round>{{
                    foButtonText
                  }}</el-button>
                </div>
              </div>
            </div>
            <!-- 基本信息 -->
            <div class="popcard_info">
              <!-- 个性化信息 -->
              <div class="pop_info">
                {{ user_info }}
              </div>
              <!-- 关注/被关注 -->
              <div class="pop_fo">
                <span
                  ><b>{{ user_fo }}</b> {{ $t("postlist.user_fo") }}</span
                >
                <span
                  ><b>{{ user_fans }}</b> {{ $t("postlist.user_fans") }}</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item_content">
        <!-- 账号信息容器 -->
        <div class="account_panel">
          <!-- 左边账号信息 -->
          <div>
            <div class="account">
              <div class="name">
                <router-link :to="'/PersonView/' + user_id">
                  {{ nickname }}
                </router-link>
              </div>
              <!-- 用户认证 -->
              <div
                v-if="auth_id == 1"
                :title="$t('postlist.auth_personal')"
                class="auth personal"
              >
                <svg viewBox="0 0 22 22">
                  <g>
                    <path
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
              <div
                v-if="auth_id == 2"
                :title="$t('postlist.auth_orgnaztion')"
                class="auth organizaion"
              >
                <svg viewBox="0 0 22 22">
                  <g>
                    <path
                      d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"
                    ></path>
                  </g>
                </svg>
              </div>
              <!-- 用户认证结束 -->
              <div class="acc">@{{ username }}</div>
              <!-- <div class="date">{{ post_day }}</div> -->
            </div>
            <div class="tip">内测用户</div>
          </div>
        </div>
        <!-- 贴文内容 -->
        <router-link :to="'/PostView/' + post_id">
          <div class="post_content" v-html="postContent"></div
        ></router-link>
        <!-- 贴文图片所在位置 -->
        <div class="post_pic" v-if="showImageVisiable">
          <!-- 显示一张图片 -->
          <div v-if="showImageVisiable">
            <!-- 显示一张图片 -->
            <div v-if="tp_url.length == 1">
              <div v-for="(item, index) in tp_url" :key="index">
                <img class="single-pic" :src="item" alt="" />
              </div>
            </div>
            <!-- 显示多张图片 -->
            <div class="mulit-list" v-else>
              <div v-for="(item, index) in tp_url" :key="index">
                <img class="mulit-pic" :src="item" alt="" />
              </div>
            </div>
          </div>
        </div>
        <!-- 贴文视频所在位置 -->
        <div class="post_video quote_video" v-if="showVideoVisiable">
          <video class="video" controls>
            <source :src="videosrc" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//获取统一请求接口
import {
  getIsFoByCurrentUserId,
  addUserFoPostUser,
  cancelUserFoPostUser,
} from "@/api";

export default {
  name: "PostPanel",
  components: {},
  props: {
    postData: Object,
    msg: String,
  },
  data() {
    return {
      posData: this.postData,
      user_id: this.postData.user_id ? this.postData.user_id : 1,
      auth_id: this.postData.auth_id ? this.postData.auth_id : 0,
      current_user_id: JSON.parse(localStorage.getItem("user")).user_id
        ? JSON.parse(localStorage.getItem("user")).user_id
        : 1,
      username: this.postData.username ? this.postData.username : "测试",
      nickname: this.postData.user_nickname
        ? this.postData.user_nickname
        : "测试",
      headerImg: this.postData.user_headimg
        ? this.postData.user_headimg
        : require("@/assets/img/user.png"),
      headerBgImg: this.postData.user_bgimg
        ? this.postData.user_bgimg
        : require("@/assets/img/header_bg.jpg"), //this.postData.user_bgimg ||
      post_id: this.postData.post_id ? this.postData.post_id : 1,
      pl_parent_id: this.postData.pl_parent_id ? this.postData.pl_parent_id : 0,
      zf_parent_id: this.postData.zf_parent_id ? this.postData.zf_parent_id : 0,
      postContent: this.postData.post_content
        ? this.addTagToLink(this.replace_em(this.postData.post_content))
        : "",
      showImageVisiable: false,
      imagesrc: require("@/assets/img/pic01.jpg"),
      user_info: this.postData.user_info
        ? this.postData.user_info
        : "该用户还没填写任何信息",
      user_fo: this.postData.user_fo
        ? this.formatCount(this.postData.user_fo)
        : 0, //关注人数
      user_fans: this.postData.user_fans
        ? this.formatCount(this.postData.user_fans)
        : 0, //被关注数
      tp_url: [],
      showVideoVisiable: false,
      videosrc: this.postData.sp_url ? this.postData.sp_url : "",
      zf_counts: this.postData.zf_counts
        ? this.formatCount(this.postData.zf_counts)
        : 0, //转发数
      pl_counts: this.postData.pl_counts
        ? this.formatCount(this.postData.pl_counts)
        : 0, //评论数
      xh_counts: this.postData.xh_counts
        ? this.formatCount(this.postData.xh_counts)
        : 0, //喜欢点赞数
      fw_counts: this.postData.fw_counts
        ? this.formatCount(this.postData.fw_counts)
        : 0, //访问数
      post_edit: this.postData.post_edit ? this.postData.post_edit : 0, //是否编辑过
      post_time: this.postData.post_time ? this.postData.post_time : "", //发帖时间
      post_day: this.postData.post_day ? this.postData.post_day : "", //发帖时间格式化
      post_city: this.postData.post_city
        ? this.postData.post_city
        : "该用户来自火星", //IP归属地
      is_fo: 0,
      foButtonText: "",
      postForm: {
        post_user_id: this.postData.user_id ? this.postData.user_id : 1,
        current_user_id: this.current_user_id,
      },
    };
  },
  //初始化
  mounted() {
    this.initData();
    this.getIsFoByCurrentUserId();
  },
  //方法
  methods: {
    initData() {
      //加载用户信息图片和视频
      let tp_str = this.postData.tp_url;
      let sp_str = this.postData.sp_url;
      if (tp_str) {
        this.tp_url = this.postData.tp_url.split("|");
        this.showImageVisiable = true;
        return;
      }
      if (sp_str) {
        this.videosrc = sp_str;
        this.showVideoVisiable = true;
        return;
      }
    },
    //查询当前用户是否关注了当前发帖人
    async getIsFoByCurrentUserId() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await getIsFoByCurrentUserId(this.postForm);

      if (res.state == 200) {
        this.is_fo = res.data;
        this.foButtonText = res.message;
      }
    },
    //点击关注
    async foUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await addUserFoPostUser(this.postForm);
      if (res.state == 200) {
        this.$emit("reloadDataList");
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //取消关注
    async cancelfoUser() {
      this.postForm.post_user_id = this.user_id;
      this.postForm.current_user_id = this.current_user_id;

      let res = await cancelUserFoPostUser(this.postForm);
      if (res.state == 200) {
        this.$emit("reloadDataList");
        this.$message({
          message: res.message,
          type: "success",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    //格式化表情包显示结果
    replace_em(str) {
      str = str.replace(/\</g, "&lt;");

      str = str.replace(/\>/g, "&gt;");

      str = str.replace(/\n/g, "<br/>");

      str = str.replace(
        /\[2023_([0-9]*)\]/g,
        '<img src="/emot/2023_$1.png" border="0" />'
      );

      return str;
    },
    //递归算法替换#标签内的内容
    addTagToLink(str) {
      let reg = /(?:#)(.[^#]*)(?:#)/g;

      let tagLink = str.match(reg);
      let finalStr = "";
      finalStr = str;
      if (!tagLink) {
        //没有匹配
        // console.log(str);
        return str;
      } else {
        tagLink.forEach((item) => {
          const content =
            '<a class="title_link" href="/#/Search?q=' +
            item.replaceAll("#", "%23") +
            '">' +
            item +
            "</a>";
          //对需要替换的字符串多次替换
          finalStr = finalStr.replace(item, content);
        });
        return finalStr;
      }
    },
    //关注/被关注数量格式化
    formatCount(counts) {
      const number = counts;
      let endValue;
      //为空
      if (!number) {
        return 0;
      }
      //小于1000
      if (number < 1000) {
        endValue = number;
      }
      //大于1000
      if (number >= 1000) {
        endValue = new Intl.NumberFormat().format(number);
      }
      //大于10000
      if (number > 10000) {
        endValue = (number / 10000).toFixed(this.decimals) + "万";
      }
      //大于一千万
      if (number > 10000000) {
        endValue = (number / 10000000).toFixed(this.decimals) + "千万";
      }
      //大于一亿
      if (number > 100000000) {
        endValue = (number / 100000000).toFixed(this.decimals) + "亿";
      }
      return endValue;
    },
  },
  //监听外部参数实时更新子组件内部变量
  watch: {
    postData(newValue) {
      if (newValue) {
        this.posData = newValue;
        return;
      }
    },
    immediate: true,
  },
};
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
.post_list {
  padding: 0 16px;
  display: flex;
  max-width: 500px;
}

.post_list_item {
  display: flex;
  flex: 1;
}

.post_list_item .item_header {
  margin-top: 10px;
  margin-right: 12px;
  position: relative;
  height: 56px;
}

/* 头像弹出信息 */
.item_header .popcard {
  position: absolute;
  top: 55px;
  left: 0;
  display: none;
  z-index: 49;
}
/* 鼠标经过弹出 */
.item_header:hover .popcard {
  display: block;
}

.popcard_panel {
  width: 334px;
  max-height: 215px;
  background: #ffffff;
  border: 1px solid #c3c3c3;
  border-radius: 8px;
  overflow: hidden;
}

.popcard_header {
  position: relative;
  height: 122px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.ex-picture-img {
  border-radius: inherit;
  /* 放置图片拉伸 */
  object-fit: cover;
  width: 334px;
  height: 122px;
}

.pop_h {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 5px;
}

.pop_name {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 70px;
}

.pop_auth {
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  top: 95px;
  font-size: 12px;
}

.pop_h_img {
  border: 1px solid #fff;
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.u_fo {
  position: absolute;
  right: 10px;
  top: 10px;
}

/* 弹出个性信息 */
.pop_info {
  padding: 10px;
  font-size: 13px;
  height: 42px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.pop_fo {
  text-align: center;
  color: #939393;
  font-size: 14px;
  margin: 5px 0;
}

.pop_fo b {
  color: #000;
}

.pop_fo span {
  margin-right: 15px;
}

.post_list_item a img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}

.item_content {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  width: 100%;
}

.item_content a {
  color: #000;
}

.account_panel {
  display: flex;
  justify-content: space-between;
  width: 400px;
}

/* 账号信息部分 */
.account {
  display: flex;
}
.name {
  font-weight: bold;
  margin-right: 5px;
}

.auth {
  width: 20px;
  height: 20px;
  fill: rgba(29, 155, 240, 0);
  cursor: pointer;
  margin-right: 5px;
}

.personal {
  fill: rgba(29, 155, 240, 1);
}

.organizaion {
  fill: rgba(255, 215, 0, 1);
}

.acc,
.date {
  color: rgb(83, 100, 113);
  /* line-height: 15px; */
  margin-right: 5px;
}

.tip {
  color: #939393;
  font-size: 12px;
}

/* 更多 */

.account_panel .more {
  cursor: pointer;
}

.pop_panel {
  display: flex;
  flex-direction: column;
}

.pop_panel .item {
  padding: 12px 16px;
  display: flex;
}

.pop_panel .item:hover {
  background-color: #ebe6e6;
  border-radius: 10px;
}

.pop_panel .item .ico {
  color: rgba(15, 20, 25, 1);
  width: 18.75px;
  height: 18.75px;
  padding-right: 12px;
}

.pop_panel .item .txt {
  font-weight: 700;
  color: #000;
}

.account_panel .more:hover {
  width: 25px;
  height: 25px;
  background-color: #cccccc;
  border-radius: 50%;
}
.account_panel .more svg {
  width: 25px;
  height: 25px;
  fill: #7a7878;
}

.ipaddr_panel .p_day,
.ipaddr_panel .ip {
  line-height: 12px;
  margin-right: 5px;
}

/* 贴文内容 */
.post_content,
.post_translation,
.post_do_translation {
  margin: 10px 0;
}

.post_do_translation span {
  font-size: 12px;
  cursor: pointer;
  color: rgb(13, 140, 238);
}

.post_translation {
  color: rgb(73, 81, 87);
}

/* 图片展示区域 */
.post_pic {
  display: flex;
}
.post_pic .single-pic {
  max-width: 380px;
  max-height: 360px;
  border-radius: 15px;
  margin-bottom: 10px;
}
.single-pic {
  max-width: 480px;
}
.mulit-list {
  display: flex;
  flex-wrap: wrap;
}
.mulit-pic {
  max-width: 190px;
  /* max-height: 160px; */
  border-radius: 15px;
  margin-right: 10px;
}

/* 视频展示区域 */

.quote_video .video {
  width: 100%;
  max-height: 300px;
}

@media screen and (max-width: 720px) {
  .account_panel {
    width: 100%;
  }
  .post_pic img {
    width: 100%;
  }

  .post_opr span {
    padding: 0;
  }

  .quote_video .video {
    width: 100%;
    max-height: 300px;
  }

  .account .acc {
    flex: 1;
  }
}

@media screen and (max-width: 400px) {
  .account_panel {
    width: 100%;
  }
  .post_pic img {
    width: 100%;
  }

  .post_opr span {
    padding: 0;
  }

  .quote_video .video {
    max-width: 200px;
  }

  .account .name {
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account .acc {
    flex: 1;
    max-width: 50px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post_pic .single-pic {
    max-width: 180px;
    max-height: 360px;
  }
}
</style>
  <style>
.u_fo span {
  font-weight: bold;
  color: #000;
}
</style>